<script setup lang="ts">
import type { Book } from '@/types';
import { BOOK_TYPE_MAP, NATIONALITY_MAP } from '@/types/constant';
import { getBookImageUrl } from '@/utils';
import { computed, watch } from 'vue';
import Row from './Row.vue';
const bookForm = defineModel<Book>({ required: true });
const dialogFormVisible7 = defineModel<boolean>('visible7');
const purchaseQuantity = defineModel<number>('purchaseQuantity', { required: true });
const modelValue1 = defineModel<number>('modelValue1');
const emit = defineEmits(['okok']);

const totalAmount = computed(() => {
  const calcPrice = bookForm.value.price * purchaseQuantity.value;
  if (purchaseQuantity.value < 2) {
    return calcPrice;
  } else if (purchaseQuantity.value === 2) {
    return calcPrice - 10;
  } else {
    return calcPrice * 0.8;
  }
});

watch(totalAmount, (newVal) => {
  modelValue1.value = newVal;
});

const nationalityName = computed(() => {
  const nationality = NATIONALITY_MAP[bookForm.value.author_nationality];
  return nationality ? nationality.label : '未知国籍';
});
const bookType = computed(() => {
  if (!bookForm.value.type) {
    return '未知类型';
  }
  return BOOK_TYPE_MAP[bookForm.value.type].label;
});
</script>

<template>
  <el-dialog title="购买图书（确认信息）" v-model="dialogFormVisible7" width="50%">
    <div class="row-container">
      <img
        v-if="bookForm.book_image"
        :src="getBookImageUrl(bookForm.book_image)"
        alt="书本图片"
        class="avatar-uploader"
      />
      <Row label="书籍编码:" :content="bookForm.book_code" />
      <Row label="书名:" :content="bookForm.name" />
      <Row label="ISBN号:" :content="bookForm.isbn" />
      <Row label="库存数量:" :content="bookForm.number" />
      <Row label="作者国籍:" :content="nationalityName" />
      <Row label="适用范围:" :content="bookForm.applicable_scope" />
      <Row label="类型:" :content="bookType" />
      <Row label="价格:" :content="bookForm.price" />
      <Row label="图书简介:" :content="bookForm.description" />
      <Row label="注意事项:" :content="bookForm.notes" />
      <el-row>
        <el-form-item label="购买数量">
          <el-input v-model.number="purchaseQuantity" type="number" min="0" />
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="单价: ">
          <span>{{ bookForm.price }}</span>
          <small class="discount-rules">(购买两本减少10元，购买三本以上打八折。)</small>
        </el-form-item>
      </el-row>
      <el-row>
        <el-form-item label="成交金额: ">
          <span>{{ totalAmount }}</span>
        </el-form-item>
      </el-row>
    </div>

    <template #footer>
      <span class="dialog-footer">
        <el-button @click="dialogFormVisible7 = false">取消</el-button>
        <el-button type="primary" @click="emit('okok')">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<style>
.row-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 间距 */
}

.row {
  display: flex;
  align-items: center;
  flex: 1 0 45%; /* 每个 row 占据 45% 的宽度，留出一些间距 */
  min-width: 200px; /* 最小宽度，防止内容过窄 */
  margin-bottom: 10px;
}

.label {
  box-sizing: border-box;
  width: 100px;
  text-align: right;
  padding-right: 12px;
}

.content {
  flex: 1;
}
.avatar-uploader {
  width: 10%;
}

.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
</style>
<style scoped>
.avatar-uploader .avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>

<style>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
